<template>
  <div class="trend">
    <div class="flow-title">
      <div class="flow-title-left">
        <div class="line" />
        <div class="text">
          {{ $t('dataAnalysis.flowTrend') }}
        </div>
      </div>
    </div>
    <!-- 单项选择 -->
    <div class="radio-box flow-form">
      <el-form @submit.prevent>
        <el-form-item :label="$t('dataAnalysis.pageBrowsing')">
          <el-radio-group v-model="typeValue">
            <el-radio
              class="radio-item"
              :label="1"
            >
              {{ $t('dataAnalysis.numberOfVisitors') }}
            </el-radio>
            <el-radio
              v-if="timeType !== 4"
              class="radio-item"
              :label="2"
            >
              {{ $t('dataAnalysis.newVisitor') }}
            </el-radio>
            <el-radio
              class="radio-item"
              :label="3"
            >
              {{ $t('dataAnalysis.pageviews') }}
            </el-radio>
            <el-radio
              v-if="timeType !== 4"
              class="radio-item"
              :label="4"
            >
              {{ $t('dataAnalysis.stayTime') }}
            </el-radio>
            <el-radio
              class="radio-item"
              :label="5"
            >
              {{ $t('dataAnalysis.perVisits') }}
            </el-radio>
            <el-radio
              v-if="timeType !== 4"
              class="radio-item"
              :label="6"
            >
              {{ $t('dataAnalysis.lossRate') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('dataAnalysis.transactionConversion')">
          <el-radio-group v-model="typeValue">
            <el-radio
              class="radio-item"
              :label="7"
            >
              {{ $t('dataAnalysis.paidNumbers') }}
            </el-radio>
            <el-radio
              class="radio-item"
              :label="8"
            >
              {{ $t('dataAnalysis.vToP') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!-- 单项选择 -->

    <div class="content-container">
      <!-- 选择显示不同端的数据 -->
      <div class="plat">
        <el-radio-group
          v-model="systemType"
          @change="onChangeSystemType"
        >
          <el-radio-button
            v-model="radioCheck"
            :label="0"
          >
            {{ $t('date.a') }}
          </el-radio-button>
          <el-radio-button
            v-model="radioCheck"
            :label="1"
          >
            PC
          </el-radio-button>
          <el-radio-button
            v-model="radioCheck"
            :label="2"
          >
            H5
          </el-radio-button>
          <el-radio-button
            v-model="radioCheck"
            :label="3"
          >
            {{ $t('sysManagement.miniProgramSmall') }}
          </el-radio-button>
          <el-radio-button
            v-model="radioCheck"
            :label="4"
          >
            {{ $t('dataAnalysis.android') }}
          </el-radio-button>
          <el-radio-button
            v-model="radioCheck"
            :label="5"
          >
            IOS
          </el-radio-button>
        </el-radio-group>
        <div class="t-explain-item">
          {{ ['',$t('dataAnalysis.numberOfVisitors')
              ,$t('dataAnalysis.newVisitor'),$t('dataAnalysis.pageviews'),$t('dataAnalysis.stayTime'),$t('dataAnalysis.perVisits')
              ,$t('dataAnalysis.lossRate'),$t('dataAnalysis.paidNumbers'),$t('dataAnalysis.vToP')][typeValue] }}
        </div>
      </div>
      <!-- /选择显示不同端的数据 -->

      <!-- 图表 -->
      <div class="chart">
        <common-chart
          v-if="flowSurveyChat.show"
          :options="flowSurveyChat.options"
          style="width:100%;height:300px;"
        />
      </div>
    </div>
    <!-- /图表 -->
  </div>
</template>

<script setup>
import Big from 'big.js'
const props = defineProps({
  startTime: {
    default: '',
    type: String
  },
  timeType: {
    default: 0,
    type: Number
  }
})

const flowTrendData = ref([]) // 流量趋势数据
const dataArray = ref([]) // Echart显示具体数据
const timeArray = ref([]) // Echart X轴下方显示的具体时间
const eChartTitleArray = ref([]) // Echart图列表
const currEchartTitle = ref('') // 当前Echart的名字
const radioCheck = ref(0)

watch(() => props.startTime,
  () => {
    onGetFlowTrendData()
  })

const typeValue = ref(1) // 默认单项选择为第一项
watch(() => typeValue.value,
  (flowType) => {
    onSwitchEchart(flowType)
  })

const systemType = ref(0)
watch(() => systemType.value,
  val => {
    systemType.value = val
    onGetFlowTrendData()
  })

onMounted(() => {
  onGetFlowTrendData()
})

// 切换趋势图实时改变
const onSwitchEchart = (flowType) => {
  dataArray.value = []
  currEchartTitle.value = eChartTitleArray.value[flowType - 1]
  switch (flowType) {
    case 1:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].userNums)
      }
      break
    case 2:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].newUser)
      }
      break
    case 3:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].visitNums)
      }
      break
    case 4:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].averageStopTime)
      }
      break
    case 5:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].averageVisitNums)
      }
      break
    case 6:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].lossUserRate)
      }
      break
    case 7:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].payUser)
      }
      break
    case 8:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(new Big(flowTrendData.value[i].payRate).times(100).toFixed(2))
      }
      break
    default:
      for (let i = 0; i < flowTrendData.value.length; i++) {
        dataArray.value.push(flowTrendData.value[i].userNums)
      }
      break
  }
  onGetOneEchart()
}

// 获取趋势图相关数据
const onGetFlowTrendData = () => {
  // 遍历Echart标题名
  const ele = document.getElementsByClassName('radio-item')
  for (let j = 0, len = ele.length; j < len; j++) {
    eChartTitleArray.value.push(ele[j].innerText)
  }
  // 默认第一个(访客数)
  currEchartTitle.value = eChartTitleArray.value[0]
  // 请求接口
  http({
    url: http.adornUrl('/admin/flowAnalysis/flowTrend'),
    method: 'get',
    params: http.adornParams({
      timeType: props.timeType,
      start: !props.startTime ? null : props.startTime,
      systemType: systemType.value
    })
  }).then(({ data }) => {
    if (data) {
      flowTrendData.value = []
      timeArray.value = []
      dataArray.value = []
      for (let i = 0; i < data.length; i++) {
        flowTrendData.value.push(data[i])
        timeArray.value.push(data[i].dateTime)
      }
      onSwitchEchart(typeValue.value)
    }
  })
}

const emit = defineEmits(['onSystemTypeChage'])
const onChangeSystemType = () => {
  emit('onSystemTypeChage', systemType.value) // 赋值

  onGetFlowTrendData()
  onSwitchEchart(typeValue.value)
}

// 获取第一部分Echart数据图
const flowSurveyChat = reactive({
  options: {},
  show: false
})
const onGetOneEchart = () => {
  flowSurveyChat.options = {
    color: ['#155bd4'],
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: { // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);width:180px;height:62px',
      formatter: function (params) {
        // params数组可以了解一下，一条线和多条线都是数组
        let html = ''
        for (const i in params) {
          const param = params[i]
          // echarts日期格式化api
          const date = param.name
          html += `<span style="color: #999999">${date}</span><br /><div style="margin-top: 12px;display: flex;align-items: center;"><i style="display: inline-block;width: 6px;height: 6px;background-color: #0058FF;margin-right: 9px;border-radius: 50%;"></i><span style=" display:inline-block;">${param.seriesName}：${param.data}</span></div>`
        }
        return html
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: timeArray.value
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: currEchartTitle.value,
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              color: '#1890FF'
            },
            // 点的颜色
            color: '#155bd4'
          }
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(2,161,233,0.5)' },
              { offset: 1, color: '#ffffff' }
            ]
          }

        },
        data: dataArray.value
      }
    ]
  }
  flowSurveyChat.show = true
}

</script>

<style lang="scss" scoped>
 @use '../index.scss';
.trend {
  .flow-title {
    margin-top: 50px;
  }
  .content-container {
    padding: 20px;
    border: 1px solid #eee;
    // 选择显示不同端的数据
    .plat {
      margin-bottom: 20px;
    }
    .chart {
      padding: 10px;
    }
  }

}
  .t-explain-item {
    display: inline-block;
    margin-left: 100px;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
  .t-explain-item::before {
    display: inline-block;
    content: '';
    width: 18px;
    height: 8px;
    background: #155bd4;
    border-radius: 8px;
    margin-right: 10px;
  }
  div :deep(.el-radio) {
      width: 200px;
    }
  div :deep(.el-radio__input.is-checked) .el-radio__inner {
      border-color: #155bd4;
      background: #155bd4;
    }
  div :deep(.el-radio__input.is-checked) + .el-radio__label {
      color: #155bd4;
    }
</style>
